<template>
	<view :class="showStr">
		<view>
			<view class="content">
				<view class="title">
					<image :src="logo"></image>
				</view>
				<view class="c1">
					<slot></slot>
				</view>
				<view class="btn">
					<button open-type="getPhoneNumber" @getphonenumber="okEvent">{{ btnData }}</button>
				</view>
			</view>
			<view class="close">
				<image src="/static/icon/close.png" @click="closeEvent"></image>
			</view>
		</view>

	</view>
</template>
  <script>
import { weixinApi } from '@/utils/api';
import helper from '@/utils/helper';
export default {
	props: {
		title: { type: String, default: "消息" },
		show: { type: Boolean, default: false },
		tabBar: { type: Boolean, default: true },
	},
	data() {
		return {
			btnData: '授权手机号自动登录',
			showStr: this.show ? 'show' : 'hide',
			titleData: this.title,
			warn: '点击头像，更换默认头像',
			nickName: '',
			logo: helper.defaultLogo,
		}
	},
	async beforeMount() {
		this.titleData = this.title;
		var icon = await helper.getIcon();
		this.logo = icon;
	},
	watch: {
		title: {
			handler(val) {
				this.titleData = val;
			},
			deep: true,
			immedaite: true
		},
		show: {
			handler(val) {
				try {
					if (val) {
						if (this.tabBar)
							uni.hideTabBar();
					} else {
						if (this.tabBar)
							uni.showTabBar()
					}
				} catch {
					console.log('tab error');
				}

				this.setShow(val);
			},
			deep: true,
			immedaite: true
		}
	},
	methods: {
		async okEvent(e) {
			let code = e.detail.code;
			let phone = '';
			if (code != undefined) {
				phone = await helper.getphone(code);
			}
			
			// if (helper.isDev) {
			//   phone = '13401913640';
			// }
			let openId = await helper.getOpenId();
			
			await weixinApi.token({ "openId": openId, "mobile": phone.mobile });
			this.$emit("ok");
		},
		closeEvent() {
			this.$emit("cancel");
		},
		setShow(val) {
			this.showStr = val ? 'show' : 'hide';
		},
		changeNick(e) {
			this.nickName = e.detail.value;
			this.warn = "";
		}
	}
}
  </script>
  
  <style scoped lang="scss">
@mixin main() {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	z-index: 999;
	background: rgba(0, 0, 0, 0.4);
}
.content {
	background-color: #fff;
	width: 518rpx;
	height: 506rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 20rpx;
	position: relative;
	.title {
		margin-top: 20rpx;
		text-align: center;
		image {
			width: 68px;
			height: 68px;
			border-radius: 50%;
		}
	}
	.c1 {
		width: 100%;
		margin: 40rpx 10rpx;
		min-height: 100rpx;
		font-size: 14px;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: 400;
		text-align: justify;
		color: #2b2b2b;
		line-height: 21px;
		.warn {
			display: flex;
			margin-top: 120rpx;
			image {
				width: 24px;
				height: 24px;
			}
			.txt {
				margin-left: 20rpx;
				color: red;
			}
		}
		.nick {
			display: flex;
			input {
				margin-left: 10rpx;
			}
		}
	}
}
.close {
	margin-top: 20rpx;
	margin: 20rpx auto 0 auto;
	text-align: center;
	image {
		width: 42px;
		height: 42px;
	}
}
.hide {
	@include main();
	display: none;
}
.show {
	@include main();
	display: flex;
}
.btn {
	button {
		width: 368rpx;
		height: 86rpx;
		background: #252F62;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFangSC, PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		color: #ffffff;
		line-height: 22px;
		letter-spacing: 0.8px;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			display: block;
		}
	}
}
button[plain] {
	border: 0;
}
</style>